<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>

${model4Book.title}<br/>
<c:if test="${!empty model4Book.image}">
	<img src="${pageContext.request.contextPath}${model4Book.image}"><br/>
</c:if>
<input type="text" id="comment" placeholder="Input comment">
<button id="add_comment">ADD</button>
<div id="wrappercomments">
	<c:if test="${!empty model4Book.model4Comments}">
		<c:forEach var="model4Comment" items="${model4Book.model4Comments}">
			${model4Comment.comment}<br/>
		</c:forEach>
	</c:if>
</div>

<script>
	$('#add_comment').click(function() {
		$.ajax({
			url : 'comment.action',
			type : 'POST',
			data : {
				comment : $('#comment').val()
			},
			dataType : 'html',
			success : function(html) {
				$('#wrappercomments').html(html);
			},
			error : function(xhr, ajaxOptions, thrownError) {
				alert('An error occurred! ' + thrownError);
			},
		});
	});
</script>
